<template>
  <el-card>
    <!-- 机构管理 -->
    <bread-crumb slot="header">
      <template slot="title">机构管理</template>
    </bread-crumb>
    <div class="Contaner">
      <div class="Select_Export">
        <div>
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchContent"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getServicesList"></el-button>
          </el-input>
        </div>
        <div>
          <!-- <el-button type="primary" @click="exportBounced = true"
            >导出</el-button
          >
          <el-button type="primary" @click="advancedSearch = true"
            >高级搜索</el-button
          > -->
        </div>
      </div>
      <!-- 表格 -->
      <div style="padding-top: 20px">
        <el-table
          :header-cell-style="{ background: '#eee', color: '#606266' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="Institutional" fixed="left" label="机构名称" width="120">
          <template slot-scope="{row}">
              <el-button
              @click="$router.push('/home/agencyDetails?id='+row.id)"
                type="text"
                size="small">
                {{row.Institutional}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="InstitutionalType"
            label="机构类型"
            width="320"
          >
          </el-table-column>
          <el-table-column prop="licence" width="260" label="办学许可证号">
          </el-table-column>
          <el-table-column prop="Licenceissued" width="130" label="发证日期">
          </el-table-column>
          <el-table-column prop="Organizers" label="举办者" width="140">
          </el-table-column>
          <el-table-column prop="Principal" label="校长" width="120">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                视频监控
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          type="flex"
          align="middle"
          justify="end"
          style="margin-top: 20px"
        >
          <el-col :span="10">
            <el-pagination
              background
              layout="total, prev, pager, next, sizes"
              :total="page.total"
              :page-sizes="[7, 10, 20, 50, 100]"
              :page-size="page.pageSize"
              @current-change="changePage"
              @size-change="handleSizeChange"
              :current-page.sync="page.currentPage"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
      <!-- 导出弹框 -->
      <!-- <el-dialog title="导出数据" width="500px" :visible.sync="exportBounced">
        <div class="ExportBtn">
          <el-button type="primary">导出当前页</el-button>
          <el-button style="margin-left: 60px" type="primary"
            >导出全部数据（搜索后）</el-button
          >
        </div>
      </el-dialog> -->
      <!-- 高级搜索 -->
      <el-dialog title="高级搜索" width="70%" :visible.sync="advancedSearch">
        <div class="advancedSearchs">
          <div class="screeningItem">
            <h3>基本信息筛选</h3>
            <div class="screeningAddress">
              <div>杭州市</div>
              <div class="Putaway">收起筛选</div>
            </div>
            <!-- 区域 -->
            <div class="Area">
              <div>区域：</div>
              <div class="areaAddress">
                <div style="padding: 0 8px 8px;cursor: pointer;" v-for="item in dizhi" :key="item">{{ item }}</div>
              </div>
            </div>
            <h3 style="margin-top: 35px; margin-bottom: 10px;">子情形筛选</h3>
            <div class="situationSelection">
              <div class="situation">机构性质：</div>
              <el-select v-model="situationsa" placeholder="请选择" style="width: 78%;">
                <el-option label="营利性质" value="profit"></el-option>
                <el-option label="非营利性质" value="noProfit"></el-option>
              </el-select>
            </div>
            <div class="situationSelection">
              <div class="situation">机构类型：</div>
              <el-select v-model="situationsaType" placeholder="请选择" style="width: 78%;">
                <el-option label="营利性质" value="profit"></el-option>
                <el-option label="非营利性质" value="noProfit"></el-option>
              </el-select>
            </div>
            <div class="situationSelection">
              <div class="situation">举办者类型：</div>
              <el-select v-model="organizerTyle" placeholder="请选择" style="width: 78%;">
                <el-option label="营利性质" value="profit"></el-option>
                <el-option label="非营利性质" value="noProfit"></el-option>
              </el-select>
            </div>
            <h3 style="margin-bottom: 10px;">时间筛选</h3>
            <div class="situationSelection">
              <div class="situation">机构成立时间：</div>
              <el-date-picker
                v-model="found"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="situationSelection">
              <div class="situation">许可证截至时间：</div>
              <el-date-picker
                v-model="ExpiryDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <h3 style="margin-bottom: 10px;">字段组合筛选</h3>
            <div class="situationSelection">
              <div class="situation">机构名称：</div>
              <el-input style="width: 78%;" v-model="InstitutionalName" placeholder="请输入内容"></el-input>
            </div>
            <div class="situationSelection">
              <div class="situation">校长：</div>
              <el-input style="width: 78%;" v-model="InstitutionalName" placeholder="请输入内容"></el-input>
            </div>
            <div class="situationSelection">
              <div class="situation">举办者：</div>
              <el-input style="width: 78%;" v-model="InstitutionalName" placeholder="请输入内容"></el-input>
            </div>
            <div class="situationSelection">
              <div class="situation">董事：</div>
              <el-input style="width: 78%;" v-model="InstitutionalName" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="advancedSearch = false">取 消</el-button>
          <el-button type="primary" @click="advancedSearch = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 视频监控 -->
      <el-dialog
        title="视频监控"
        :visible.sync="videoMonitoring"
        width="100%"
       >
        <div class="videoContainer">
          <!-- 播放列表 -->
          <div class="Playlist">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card" >
              <el-tab-pane label="直播" name="first">
                <el-col :span="12">
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                      @open="handleOpen"
                      @close="handleClose">
                      <el-submenu index="1" v-for="item in camerasList" :key="item">
                        <template slot="title">
                          <span>{{item.servicesName}}</span>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                    </el-menu>
                  </el-col>
              </el-tab-pane>
              <el-tab-pane label="录播" name="second"></el-tab-pane>
            </el-tabs>
          </div>
          <!-- 播放器 -->
          <div class="Players">
            <video controls="controls" id="movie" src="https://v1.kwaicdn.com/upic/2021/09/10/22/BMjAyMTA5MTAyMjA0NTdfMTg4OTE4MjM1OV81NjkzNjcyNTYxMF8xXzM=_b_Baddcd3d1aa999cf2909e0f2390a582a0.mp4?pkey=AAXjSvw7BQhVLaY_ref-fQaQ0Mv2hg9r4CEeDY-6D6kIC5ptTgoQ1vzRQoahXU21wlPUdlOyBS_XAdAxs5pXd4wUcWRX62p4VNv0s8cV8D7qPi-rw5bu0INsMeGjnHt-y5Y&tag=1-1634410031-xpcwebdetail-0-aweo9smarf-9a94392ff48ab942&clientCacheKey=3xshrguhq6cj9fu_b.mp4&tt=b&di=78f5148a&bp=10004" width="100%" height="100%"></video>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import { listServices, servicesCamers } from '@/api'
export default {
  data () {
    return {
      activeName: 'first',
      videoMonitoring: false,
      InstitutionalName: '',
      found: '',
      ExpiryDate: '',
      organizerTyle: '',
      situationsaType: '',
      situationsa: '',
      exportBounced: false,
      advancedSearch: false,
      tableData: [],
      multipleSelection: [],
      camerasList: [],
      options: [
        {
          value: 'servicesName',
          label: '机构名称'
        },
        {
          value: 'principal',
          label: '校长'
        },
        {
          value: 'organizer',
          label: '举办者'
        }
      ],
      dizhi: [
        '杭州市',
        '上城区',
        '下城区',
        '江干区',
        '拱墅区',
        '西湖区',
        '滨江区',
        '萧山区',
        '余杭区',
        '桐庐县',
        '淳安县',
        '建德市',
        '富阳区',
        '临安区', '滨江区',
        '萧山区',
        '余杭区',
        '桐庐县',
        '淳安县',
        '建德市',
        '富阳区',
        '临安区',
        '钱塘新区'
      ],
      searchContent: '',
      select: '',
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      }
    }
  },
  watch: {
    videoMonitoring (val) {
      if (val === false) {
        this.toggleSound()
      }
    }
  },
  created () {
    this.getServicesList()
  },
  methods: {
    deles (index, data) {
      console.log(index)
      console.log(data)
    },
    toggleSound () {
      var video = document.getElementById('movie')
      if (video.paused) { // 如果已暂停则播放
        video.play() // 播放控制
      } else { // 已播放点击则暂停
        video.pause() // 暂停控制
      }
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      console.log(this.page.pageSize)
    },
    // 当前页发生改变时触发
    changePage (newPage) {
      this.page.currentPage = newPage
    },
    // 监控视频
    deleteRow (index, rows) {
      this.videoMonitoring = true
      console.log('索引', index)
      console.log('数组', rows)
      this.getCamersList(rows[index].id)
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      console.log('我选择了')
      console.log(val)
      this.multipleSelection = val
    },
    handleClose () {

    },
    handleOpen () {

    },
    async getServicesList () {
      this.tableData = []
      var data = {}
      if (this.searchContent) {
        switch (this.select) {
          case 'servicesName' :
            data.servicesName = this.searchContent
            break
          case 'principal' :
            data.principal = this.searchContent
            break
          case 'organizer' :
            data.organizer = this.searchContent
            break
        }
      }
      const ser = await listServices(data)
      if (ser?.code === 200) {
        const { list, total } = ser?.data
        console.log('大数组的数据', list)
        list.forEach(element => {
          this.tableData.push({
            id: element.id,
            Institutional: element.name,
            InstitutionalType: element.servicesOpenLicense.schoolTypeName,
            licence: element.servicesOpenLicense.license,
            Licenceissued: element.servicesOpenLicense.lssueDateStart,
            Organizers: element.servicesOpenLicense.organizer,
            Principal: element.servicesOpenLicense.principal
          })
        })
        this.page.total = total
      }
    },
    async getCamersList (id) {
      var params = {
        servicesId: id
      }
      const { code, data } = await servicesCamers(params)
      if (code === 200) {
        console.log('机构摄像头列表', data)
        this.camerasList = data.cameras
      }
    },
    formatTime (item) {
      return this.$formatTime(item)
    }

  }
}
</script>

<style lang="less" scoped>
.Contaner {
  padding: 10px;
  /deep/ .el-col-12 {
    width: 105% !important;
  }

  .videoContainer {
    height: 100vh;
    display: flex;
    margin-top: -30px;
    overflow: hidden;

    .Players {
      width: 100%;
    }

    .Playlist {
      width: 227px;
      border: 1px solid #E4E7ED;
    }

  }

  /deep/ .el-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /deep/ .el-dialog__body {
    border-top: 1px solid #e4e4e4;
  }
  .advancedSearchs {
    .screeningItem {

      .situationSelection {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .situation {
          width: 117px;
          height: 32px;
          text-align: right;
          line-height: 32px;
        }
      }

      .Area {
        display: flex;
        margin-top: 8px;
        align-items: center;
        border-top: 1px dashed #e4e4e4;
        .areaAddress {
          width: 85%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-around;
          margin: 8px 0;
          height: 20px;
        }
      }

      .screeningAddress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 35px;
        margin-top: 10px;

        .Putaway {
          cursor: pointer; // 小手
          width: 90px;
          height: 24px;
          border: 1px solid #d9d9d9;
          text-align: center;
          box-sizing: border-box;
          border-radius: 2px;
          text-align: center;
          line-height: 24px;
        }
      }
    }
  }
  .ExportBtn {
    width: 80%;
    margin: 0 auto;
  }
  .Select_Export {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /deep/ .el-input__inner {
      width: 200px;
    }
    /deep/ .el-input-group {
      width: 30%;
    }
    /deep/ .el-select {
      width: 120px;
    }
  }
}
</style>
